<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/left.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <title>新增权限管理</title>
    <style>
        .remark{
            margin-top: 20px;
            color: #737373;
        }
        .msg{padding-top:10px;font-size:16px;font-weight: bold}
    </style>
    <script type="text/javascript">
        var href = location.href;
        var power_id = null;
        if(href.indexOf("?")>0){
            var str = href.split("?")[1];
            power_id = str.split("=")[1];
        }
        $(function(){
            var vue = new Vue({
                el:'#app',
                data:{
                    url:'http://localhost:8889/power',
                    power:{pid:0},
                    powers:[]
                },
                methods:{
                    getups : function(){
                        var that = this;
                        $.getJSON(that.url+"/query2",function(data){
                            that.powers = data;
                        });
                    },
                    find : function(){
                       if(power_id){
                           var that = this;
                           $.getJSON(that.url+"/find",{id:power_id},function(data){
                               that.power = data;
                           });
                       }
                    },
                    save:function(){
                        var that = this;
                        var ps = {
                            id:that.power.id,
                            pid:that.power.pid,
                            pname:that.power.pname,
                            url:that.power.url,
                            icon:that.power.icon,
                            xh:that.power.xh,
                            status:1
                        }
                        if((ps.pid==null)||(ps.pname==null)){
                            $(".msg").html("<span style='color:red'>请完善权限信息！</span>");
                        }else{
                            $.post(that.url+"/save",ps,function(data){
                                if(data){
                                    $(".msg").html("<span style='color:darkgreen;font-size: 18px;margin-left:20px'>权限信息保存成功！</span>");
                                }else{
                                    $(".msg").html("<span style='color:red'>权限信息保存失败，请重试！</span>");
                                }
                            })
                        }

                    }
                }
            })
            vue.getups();
            vue.find();
            $("#header").load("header.html");
            $("#left").load("left.html");
        })
    </script>
</head>
<body>
    <div class="container-fluid" id="app">
        <div class="row" id="header"></div>
        <div class="row">
            <div class="col-md-2" id="left"></div>

            <div class="col-md-8"  style="margin-left:30px;margin-top:10px">

                <div class="row tithead"style="margin-left: 15px">

                    <div class="col-md-4">
                        <h3 class="glyphicon glyphicon-tags"> 修改新增权限
                        </h3>
                    </div>
                    <div class="col-md-4"></div>
                    <div class="col-md-2" >
                        <h4 style="margin-top:30px;margin-left:30px">
                            <a href="powers.html" style="text-decoration:none;color: #666666">
                                权限列表 <i class="glyphicon glyphicon-chevron-right"></i>
                            </a>
                        </h4>
                    </div>

                </div>

                <div class="row col-md-10"style="margin-top:10px">
                    <ul class="nav nav-tabs" role="tablist" style="margin-bottom: 30px;margin-top: 10px">
                        <li role="presentation" class="active">
                            <a href="#coa" aria-controls="coa" role="tab" data-toggle="tab">新增修改权限</a>
                        </li>

                    </ul>
                    <div class="form-group">
                        <div class="input-group">
                            <label class="input-group-addon">权限名称</label>
                            <input v-model="power.pname" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <label class="input-group-addon">父级权限</label>
                            <select v-model="power.pid" class="form-control">
                                <option value="0">无</option>
                                <option v-for="p in powers" :value="p.id">{{p.pname}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <label class="input-group-addon">访问地址</label>
                            <input v-model="power.url" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <label class="input-group-addon">图标编码</label>
                            <input v-model="power.icon" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <label class="input-group-addon">排序序号</label>
                            <input v-model="power.xh" class="form-control">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2">

                        </div>
                        <div class="col-md-8">
                            <p class="msg"></p>
                        </div>
                        <div class="col-md-2">
                            <button @click="save" class="btn btn-block btn-primary">保存</button>
                        </div>
                    </div>
                    <div class="row text-right remark"><h5>备注：操作一 分为授课和停课，点击停课即预约不到此教练的信息，反之亦然. </h5></div>
                </div>


            </div>
        </div>
    </div>
</body>
</html>